<template>
	<div style="width: 100%">
		<el-input
			:readonly="true"
			@click="onClick"
			v-model="state.showText"
			v-bind="allAttrs"
			:id="'zhChooseUser' + columnId"
			:name="'zhChooseUser' + columnId"
			:size="mySize"
			:clearable="clearable"
			autosize
			type="textarea"
		>
		</el-input>
		<zh-dialog width="90%" title="用户选择" :destroy-on-close="true" v-model="state.visible" confirmButtonText="确定" @confirm="onConfirm">
			<OrgUserSelect
				ref="orgSelectRef"
				:max="props.max"
				:min="props.min"
				:orgTypeList="props.orgTypeList"
				:userTypeList="props.userTypeList"
				v-model="state.checkValue"
				:mode="props.mode"
				@change="onChange"
				:checkList="state.checkList"
			></OrgUserSelect>
		</zh-dialog>
	</div>
</template>
<script lang="ts" setup name="zhChooseUser">
import { ElMessage } from 'element-plus';
import OrgUserSelect from './component/OrgUserSelect.vue';
// 引入组件需要的属性、控制类
import { itemProps, itemController } from '../lib/mapController';
// 定义属性
const props = defineProps({
	modelValue: [String, Array],
	nameValue: {
		type: [String, Array],
		default: undefined,
	},
	...itemProps, // 基础属性
	clearable: {
		// 是否显示可清空的按钮，默认显示
		type: Boolean,
		default: false,
	},
	//模式：multiple 多选
	mode: {
		type: String,
		default() {
			return '';
		},
	},
	//组织类型
	orgTypeList: {
		type: Array,
		default: () => {
			return [];
		},
	},
	//用户类型
	userTypeList: {
		type: Array,
		default: () => {
			return ['10'];
		},
	},
	//最大可选人数
	max: {
		type: Number,
		default: 200,
	},
	//最小选择人数
	min: {
		type: Number,
		default: 0,
	},
});
const attrs = useAttrs();
const emit = defineEmits(['update:modelValue', 'update:nameValue', 'change']);
const allAttrs = computed(() => {
	return Object.assign(props.extend, attrs);
});
const { globalSize } = itemController(props, allAttrs.value, emit);
const state = reactive({
	mySize: allAttrs.value.size,
	visible: false,
	showText: '',
	checkValue: props.modelValue,
	checkList: [],
});
// 初始化
globalSize(state);
// 输出
const { mySize } = toRefs(state);
// 初始化
onMounted(() => {
	nextTick(() => {
		queryCheckTable();
	});
});

watch(
	() => props.modelValue,
	() => {
		queryCheckTable();
	},
	{
		deep: true,
	}
);
// ------------------定义子组件--------------------------
const orgSelectRef = ref<any>();
// ------------------方法区------------------------------
const onChange = (checkList) => {
	let text = '';
	if (props.mode === 'multiple') {
		let values = [] as any;
		let names = [] as any;
		if (checkList && checkList.length > 0) {
			checkList.forEach((item) => {
				values.push(item.userId);
				names.push(item.fullName);
				if (text) {
					text = text + ',' + item.fullName;
				} else {
					text = item.fullName;
				}
			});
		}
		emit('update:modelValue', values);
		emit('update:nameValue', names);
	} else {
		let value = '';
		if (checkList && checkList.length > 0) {
			value = checkList[0].userId;
			text = checkList[0].fullName;
		}
		emit('update:modelValue', value);
		emit('update:nameValue', text);
	}
	emit('change', checkList);
	state.showText = text;
	state.checkList = checkList;
};
const onClick = () => {
	state.visible = true;
};
const onConfirm = () => {
	if (state.checkList && state.checkList.length < props.min) {
		ElMessage.warning('选择用户不能少于' + props.min + '个');
		return;
	}
	if (state.checkList && state.checkList.length > props.max) {
		ElMessage.warning('选择用户不能大于' + props.max + '个');
		return;
	}
	orgSelectRef.value.success();
	state.visible = false;
};
const queryCheckTable = () => {
	//查询已选中的组织数据
	if (!props.modelValue || props.modelValue.length <= 0) {
		state.checkList = [];
		return;
	}
	let userIdList = [] as any;
	if (props.mode === 'multiple') {
		if (props.modelValue && props.modelValue instanceof Array) {
			userIdList = props.modelValue;
		} else {
			userIdList.push(props.modelValue);
		}
	} else {
		userIdList.push(props.modelValue);
	}
	let params = { userIdList: userIdList };
	$api.common.send
		.post('user0037', params)
		.then((res) => {
			state.checkList = res.result.list;
			let text = '';
			if (props.mode === 'multiple') {
				if (state.checkList && state.checkList.length > 0) {
					state.checkList.forEach((item:any) => {
						if (text) {
							text = text + ',' + item.fullName;
						} else {
							text = item.fullName;
						}
					});
				}
			} else {
				if (state.checkList && state.checkList.length > 0) {
					text = state.checkList[0].fullName;
				}
			}
			state.showText = text;
		})
		.catch(() => {});
};
</script>
<style lang="scss" scoped></style>
